<template>
  <div class="dashboard-editor-container">
<!-- 调度统计 -->
    <panel-group :group-data="panelGroupData"/>

    <el-row style="margin-bottom: 10px">
      <el-col :span="12">
        <div>调度报表</div>
      </el-col>
      <el-col :span="12" style="text-align: right">
        <el-date-picker
          size="small"
          v-model="dateDuring"
          type="datetimerange"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
          :default-time="['00:00:00','23:59:59']"
        >
        </el-date-picker>
        <el-button type="primary" size="small" @click="getScheduleInfo">查询</el-button>
      </el-col>
    </el-row>

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
    <!-- 折线图 -->
      <el-col :span="16">
        <div class="chart-wrapper">
          <line-chart :chart-data="lineChartData"/>
        </div>
      </el-col>
      <!-- 饼图 -->
      <el-col :span="8">
        <div class="chart-wrapper">
          <pie-chart :chart-data="pieCharData"/>
        </div>
      </el-col>

    </el-row>
  </div>
</template>

<script>
  import PanelGroup from './components/PanelGroup'
  import LineChart from './components/LineChart'
  import PieChart from './components/PieChart'
  import {getChartInfo,getDashboardInfo} from "../../api/dashboard";
  import qs from 'qs';

  export default {
    name: 'DashboardAdmin',
    components: {
      PanelGroup,
      LineChart,
      PieChart,
    },
    data() {
      return {
        lineChartData: {
          successData: [],
          failData: [],
          runningData: [],
          lineCharDates: []
        },
        pieCharData:{
          jobSuccess: 0,
          jobFail: 0,
          jobRunning: 0
        },
        dateDuring: [],
        panelGroupData: {
          jbobLogCount: null,
          jobInfoCount: null,
          executorCount: null
        }
      }
    },
    beforeCreate() {

    },
    computed: {
      // 默认时间
      timeDefault () {
        let date = new Date()
        // 通过时间戳计算
        let defalutStartTime = date.getTime() - 7 * 24 * 3600 * 1000 // 转化为时间戳
        let defalutEndTime = date.getTime()
        let startDateNs = new Date(defalutStartTime)
        let endDateNs = new Date(defalutEndTime)
        // 月，日 不够10补0
        defalutStartTime = startDateNs.getFullYear() +
          '-' + ((startDateNs.getMonth() + 1) >= 10 ? (startDateNs.getMonth() + 1) : '0' + (startDateNs.getMonth() + 1)) +
          '-' + (startDateNs.getDate() >= 10 ? startDateNs.getDate() : '0' + startDateNs.getDate()) + ' 00:00:00'
        defalutEndTime = endDateNs.getFullYear() + '-' +
          ((endDateNs.getMonth() + 1) >= 10 ? (endDateNs.getMonth() + 1) : '0' + (endDateNs.getMonth() + 1)) + '-' +
          (endDateNs.getDate() >= 10 ? endDateNs.getDate() : '0' + endDateNs.getDate()) + ' 23:59:59'
        return [defalutStartTime, defalutEndTime]
      }
    },
    created() {
      this.dateDuring = this.timeDefault
      this.getDashBoardInfo()
      this.getScheduleInfo()
    },
    methods: {
      getDashBoardInfo(){
        getDashboardInfo().then(res => {
          const {
            code, content: {
              jobInfoCount, jobLogCount, jobLogSuccessCount,executorCount
            }
          } = res
          if (res.code === 200) {
            this.$nextTick(() => {
              this.panelGroupData.jobInfoCount = jobInfoCount
              this.panelGroupData.jobLogCount = jobLogCount
              this.panelGroupData.executorCount = executorCount
            })
          }
        }).catch(function (err) {
          console.log(err.message)
        })
      },

      getScheduleInfo() {
        const timeScope = {
          startDate : this.dateDuring[0],
          endDate : this.dateDuring[1]
        }
        // console.info("timeScope.startDate:" + JSON.stringify(timeScope))

        getChartInfo(qs.stringify(timeScope)).then(res => {
          const {
            code, content: {
              triggerCountRunningTotal, triggerCountSucTotal, triggerCountFailTotal,
              triggerDayList, triggerDayCountRunningList, triggerDayCountFailList, triggerDayCountSucList
            }
          } = res
          if (res.code === 200) {
            this.$nextTick(() => {
              // console.info("chart info data refresh")
              this.lineChartData.lineCharDates = triggerDayList
              this.lineChartData.successData = triggerDayCountSucList
              this.lineChartData.failData = triggerDayCountFailList
              this.lineChartData.runningData = triggerDayCountRunningList

              this.pieCharData.jobRunning = triggerCountRunningTotal
              this.pieCharData.jobSuccess = triggerCountSucTotal
              this.pieCharData.jobFail = triggerCountFailTotal
            })
          }
        }).catch(function (err) {
          // console.log(err.message)
        })
        // console.info(JSON.stringify(this.pieCharData))
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" slot-scope>
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
    .panel-group {
      margin-top: 0px;
    }
  }
</style>
